import { useRequest } from 'ahooks'
import { Toast } from 'antd-mobile'
import { useState } from 'react'
import timeConvert from '../../libs/timeConvert'
import { Remark } from '../../models/types'
import { RemarkService } from '../../services'
import { Warnicon } from '../Icon'
import styles from './style.module.scss'

interface Props {
  remark: Remark
  isMai: boolean
}

export default function Reamrk({ remark, isMai }: Props) {

  const [islove, setIsLove] = useState(remark?.islove)
  const [nums, setNums] = useState(remark.thumbs)
  
  const { data, run: goThumb } = useRequest(
    RemarkService.thumb,
    {
      manual: true,
      onSuccess: (res) => {
        if (res.stat === 'OK') {
          setIsLove(!islove)
          !islove ? setNums(nums + 1) : setNums(nums - 1)
        } else if (res.stat === "ERR_NOT_LOGIN") Toast.show({ content: <Warnicon text='用户未登录' /> })
      },
      debounceInterval: 500
    })

  return (
    <div key={remark._id} className={styles.list}>
      <img src={remark.user.avatar} alt="" className="avatar" />
      <div className={styles.content}>
        <h3>
          <p>{remark.user.nickname}</p>
          {isMai && <div>卖家</div>}
          <span> · {timeConvert(remark.createAt)}</span>
        </h3>
        <article>{remark.content}</article>
      </div>
      <div className={styles.thumb}>
        {islove && <i
          onClick={() => { goThumb(remark._id, false) }}
          className={styles.love + ' iconfont icon-dianzan2'}></i>}
        {!islove && <i
          onClick={() => { goThumb(remark._id, true) }}
          className=' iconfont icon-dianzan1'></i>}
        <span>{nums > 0 && nums}</span>
      </div>
    </div>
  )
}
